<template>
    <div class="review-card-wrapper">

        <div class="review-card">
            <img :src="review.head_img" />
                        
            <span class="name">
                {{ review.name }}
            </span>
            
            <span class="like">
                赞{{ review.like }}
            </span>

            <div class="content">
                <div v-if="review.replyContent" class="replyContent">
                    {{ review.replyContent }}
                </div>

                {{ review.content }}
            </div>

            <div class="reply">
                <div @click="$emit('showReplyPage')">{{ review.replyCount }}回复</div>
                <span>{{ review.date }}</span>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'reviewCard',
    props: {
        review: Object
    }
}
</script>

<style lang="less" scoped>
.review-card-wrapper{
    .review-card{
        display: grid;
        grid-template-columns: 40px 1fr 25px;
        align-items: center;
        row-gap: 6px;

        img{
            margin-top: 6px;
            height: 30px;
            width: 30px;
            border-radius: 50%;
        }

        .name{
            font-size: 13px;
            font-weight: bold;
        }

        .like{
            font-size: 13px;
            font-weight: bold;
        }

        .replyContent{
            background-color: @background-grey-f8;
            padding: 2px 4px;
            color: @font-grey-67;
            font-size: 14px;
            margin-bottom: 8px;
        }
        
        .content{
            grid-column-start: 2;
            grid-column-end: 3;
            font-size: 14px;
            font-weight: bold;
        }

        .reply{
            grid-column-start: 2;
            grid-column-end: 3;

            margin-top: 5px;
            display: flex;
            align-items: center;
            column-gap: 15px;
            font-size: 12px;
            font-weight: bold;
            div{
                background-color: @background-grey-f2;
                border-radius: 10px;
                padding: 2px 8px;
            }
            span{
                color: @font-grey-99;
            }
        }
    }
}
</style>